<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { ShopType } from "@/types/pages/home";
const props = defineProps({
  data: {
    type: Array as any,
    default: () => [],
  },
});
const left = computed(() => {
  return props.data.filter((item: any, index: number) => {
    return index % 2 == 0;
  });
});
const right = computed(() => {
  return props.data.filter((item: any, index: number) => {
    return index % 2 != 0;
  });
});
const emits = defineEmits(["click", "enshrine"]);
const enshrine = (val: ShopType) => {
  emits("enshrine", val);
};
const itemFn = (val: ShopType) => {
  emits("click", val);
};
</script>

<template>
  <view class="waterfall">
    <view :class="i == 1 ? 'left' : 'right'" v-for="i in 2" :key="i">
      <view class="item" v-for="(item, index) in i == 1 ? left : right" :key="index" @click="itemFn(item)">
        <view class="top-img">
          <image class="image" style="width: 100%" mode="widthFix" :src="item.pic"></image>
          <view class="glad" @click.stop="enshrine(item)">
            <image style="width: 18px" mode="widthFix" v-if="item.collectFlag" src="@/static/image/glad.png"></image>
            <image style="width: 18px" mode="widthFix" v-else src="@/static/image/nglad.png"></image>
          </view>
        </view>
        <view class="cont">
          <view class="title">
            {{ item.name }}
          </view>
          <view class="price">
            {{ $amountFormat(item.amount) }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.waterfall {
  display: flex;
  justify-content: space-between;

  .left,
  .right {
    width: 48%;

    .top-img {
      position: relative;

      .image {
        border-radius: 16px;
        background: #f2f2f2;
      }

      .glad {
        position: absolute;
        bottom: 10px;
        right: 10px;
        background: rgba(96, 96, 96, 0.4);
        border-radius: 6px;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .cont {
      margin: 10px 0;

      .title {
        /* 商品标题 */

        font-size: 14px;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: 0px;

        /* 外部/black 3 */
        color: #606060;
        -webkit-line-clamp: 3;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .price {
        margin-top: 5px;

        font-size: 14px;
        font-weight: bold;
        line-height: 20px;
        letter-spacing: 0px;

        /* 外部/Black font */
        color: #303030;
      }
    }
  }
}
</style>
